<template> 
	<div class="item-list">
    <div 
    class="item" 
    v-for="(item,key) of cities" 
    :key="key"
    :ref="key"
    @click="handleLetterClick"
    @touchstart.prevent="handleTouchStart"
    @touchend="handleTouchEnd"
    @touchmove="handleTouchMove"
    >
    {{key}}
  </div>
  
</div>
</template> 

<script> 
  export default { 

    data () { 
      return { 
        touchStaus:false,
        startY:0,
        timer:false
      }; 
    }, 
    props:{
      cities:Object,
    },
    computed:{
      letters(){
        const letters=[];
        for(let i in this.cities){
          letters.push(i)
        }
        return letters;
      }
    },
    updated(){
      this.startY=this.$refs['A'][0].offsetTop
    },
    methods: { 
      handleLetterClick(e){
        this.$emit('change',e.target.innerText)
      },
      handleTouchStart(){
        this.touchStaus=true;
      },
      handleTouchMove(e){
        if(this.touchStaus){ 
          if(this.timer){
            clearTimeout(this.timer)
          }
          this.timer=setTimeout(()=>{
            const touchY=e.touches[0].clientY-79;
            const index=Math.floor((touchY-this.startY)/20)
            if(index>=0 && index<this.letters.length){
              this.$emit("change",this.letters[index])
            }
          },16)
          
        }

      },
      handleTouchEnd(){
        this.touchStatus=false
      }

    },
    mounted(){
      
    }


  }; 
</script> 

<style scoped> 
.item-list{
  position: absolute;
  right: 0;
  top: 140px;
  color: #00bcd4;
}
.item{
  width: 20px;
  height: 20px;
  text-align: center;

}
</style> 